import React from "react";
import {Link} from "react-router";
import { connect } from 'react-redux'
import $ from "jquery";


import Header from "../components/product/Header";
import Comment from "../components/product/Comment";
import DescTabs from "../components/product/DescTabs";
import Recommend from "../components/product/Recommend";
import Footer from "../components/product/Footer";
import Specs from "../components/product/Specs";

import Slider from '../components/Slider/Slider';



import '../../asset/css/product.css';

import { setExchangeModalData, setGlobalData } from '../actions/index';




class ProductView extends React.Component{


    constructor(){
        super()
        this.state  = {
            data :{
                id:1,
                title:'小米5c 移动版 3GB+64GB',
                desc:'搭载澎湃S1 八核高性能处理器 / “暗夜之眼”超感光相机 / 135g 轻薄金属机身 / 5.15"高亮护眼屏',
                price:'89',
                discount:'10',
                orgPrice:'99',
                specs:[
                    {featureTypeId:1,name:'颜色',features:[
                        {featureId:1,name:'红色','previewType':'IMAGE','preview':''},
                        {featureId:2,name:'蓝色','previewType':'IMAGE','preview':''},
                        {featureId:3,name:'白色','previewType':'IMAGE','preview':''}

                    ]},
                    {featureTypeId:2,name:'尺码',features:[
                        {featureId:1,name:'XL','previewType':'LITERAL','preview':''},
                        {featureId:2,name:'XXL','previewType':'LITERAL','preview':''},
                        {featureId:3,name:'XXXL','previewType':'LITERAL','preview':''}

                    ]}
                ],
                images : [
                    {
                        src: require('../../image/111.jpg'),
                        alt: 'images-1',
                    },
                    {
                        src: require('../../image/222.jpg'),
                        alt: 'images-2',
                    },
                    {
                        src: require('../../image/333.jpg'),
                        alt: 'images-3',
                    },
                ]


            },
            showState:0,
            postData:{
                title:''
            }
        }


        this.showSpace = this.showSpace.bind(this);
        this.addCart = this.addCart.bind(this);


        //初始化标题
        const _this = this;

        let data = this.state.data;
        let title = this.state.data.title;
        data.specs.map(function(item,i){

            let key = 'group'+i;
            _this.state[key] = 0


            if(i==0){
                title += ' ';
            }

            title += item.features[0].name


        })


        this.state.postData.title = title;



    }

    showSpace(){

        let {showState} = this.state;
        showState = showState == 0?1:0;

        this.setState({
            showState : showState,
        })
    }

    /**
     * 添加到购物车
     */
    addCart(){

        this.setState({
            showState : 0,
        })

    }



    componentWillMount() {




    }
    render(){

        const data = this.state.data;

        let price;
        if(data.discount > 0){
            price= (
                <div className="market_price">
                    <span>￥</span> <s>{data.price}</s>
                    <div className="tips">直降{data.discount}元</div>
                </div>
            );
        }





        return(
            <div className="page-product-view" data-log="商品详情">
                <div className="bt_mask">
                    <div className="bt_panel">
                        <p className="tit"></p>
                        <p className="tips"></p><img src="../../asset/img/icon/close.png" className="bt_close"/></div>
                </div>
                <div className="product-view">
                    <Header/>
                    <Slider
                        items={this.state.data.images}
                        speed={1.2}
                        delay={2.1}
                        pause={true}
                        autoplay={true}
                        dots={true}
                        arrows={false}
                    />

                    <div className="titleView">
                        <div className="name">{data.title}</div>
                        <div className="product_desc">{data.desc}</div>
                        <div className="priceBox bb">
                            <div className="price">249</div>
                            {price}
                        </div>
                    </div>

                    <div className="attrsQaView J_linksign-customize">
                        <div className="div more" onClick={this.showSpace}>
                            <p className="has">已选</p>
                            <div className="productInfo">{this.state.postData.title}</div>
                        </div>
                    </div>

                    <Comment></Comment>

                    <DescTabs></DescTabs>

                    <Recommend productId="1"/>
                    <Footer showSpace={this.showSpace} showState={this.state.showState}></Footer>
                    <a href="javascript:;" style={{'visibility': 'hidden'}}>
                        <img src="../../asset/img/top_1a2bcd9.png/"/>
                    </a>
                    <Specs showSpace={this.showSpace} showState={this.state.showState} addCart={this.addCart} data={this.state.data} postData={this.state.postData}></Specs>


                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(ProductView);

